<script setup lang="ts">
const props = defineProps({
    showMenu: {
        type: Boolean,
        default: false
    }
})
const menuList=[
    {
        name:'网站首页',
        url:'/'
    },
    {
        name:'关于嘉来',
        url:'/',
        children:[
            {
                name:'公司简介',
                url:'/'
            },
            {
                name:'企业文化',
                url:'/'
            },
            {
                name:'公司荣誉',
                url:'/'
            },
            {
                name:'合作伙伴',
                url:'/'
            }
        ]
    },
    {
        name:'经典案例',
        url:'/',
        children:[
            {
                name:'工程案例',
                url:'/'
            },
            {
                name:'设计案例',
                url:'/'
            },
        ]
    },
    {
        name:'苗圃展示',
        url:'/',
        children:[
            {
                name:'苗圃简介',
                url:'/'
            },
            {
                name:'苗木资源',
                url:'/'
            }
        ]
    },
    {
        name:'嘉来资讯',
        url:'/',
        children:[
            {
                name:'嘉来新闻',
                url:'/'
            },
            {
                name:'嘉来培训',
                url:'/'
            },
            {
                name:'员工风采',
                url:'/'
            }
        ]
    },
    {
        name:'联系我们',
        url:'/',
    },
    {
        name:'员工通道',
        url:'/',
        children:[
            {
                name:'OA',
                url:'/'
            },
            {
                name:'ERP',
                url:'/'
            },
            {
                name:'钉钉',
                url:'/'
            },
            {
                name:'红圈CRM+',
                url:'/'
            },
        ]
    },
    {
        name:'在线留言',
        url:'/',
    }
]
</script>


<template>
    <div class="fixed inset-0 w-full h-full bg-[url(~/assets/img/nav_bj.jpg)] bg-center bg-no-repeat bg-cover z-20 transition-transform duration-300 ease-in-out"
         :class="props.showMenu?'translate-y-0':'-translate-y-full'"
    >
        <div class="">
            <div class="grid grid-cols-[300px_1fr]">
                <!--左侧菜单-->
                <div class="relative">
                    <div class="bg-white w-2xs h-[calc(100vh-100px)] bottom-0 pt-8 absolute">
                        <ul class="cursor-pointer">
                            <li class="px-8 group relative" v-for="(item,index) in menuList" :key="index">
                                <div class="text-base leading-14 group-hover:text-green-600 border-b border-gray-300">{{ item.name }}</div>
                                <div class="absolute left-full top-0 hidden group-hover:block bg-gray-100 shadow-md min-w-[200px] py-2 z-10" v-if="item.children?.length>0">
                                    <div class="flex flex-col">
                                        <a class="text-sm leading-12 text-center hover:text-green-600" v-for="citem in item.children">
                                            {{ citem.name }}
                                        </a>
                                    </div>

                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--右侧表单-->
                <div class="pt-10 h-screen flex items-center justify-center">
                    <div class="p-6 w-full max-w-2xl">
                        <h3 class="text-[18px] leading-[36px] text-white mb-[10px]">当您有问题可以给我们留言</h3>
                        <form>
                            <div class="text-white grid grid-cols-1 sm:grid-cols-2 gap-x-10">
                                <div class="leading-[56px] border-b border-b-gray-500 focus-within:border-b-white">
                                    <input class="w-full focus:outline-none" type="text" placeholder="姓名"/>
                                </div>
                                <div class="w-full leading-[56px] border-b border-b-gray-500 focus-within:border-b-white">
                                    <input class="focus:outline-none" type="text" placeholder="电话"/>
                                </div>
                                <div class="w-full leading-[56px] border-b border-b-gray-500 focus-within:border-b-white">
                                    <input class="focus:outline-none" type="text" placeholder="微信"/>
                                </div>
                                <div class="w-full leading-[56px] border-b border-b-gray-500 focus-within:border-b-white">
                                    <input class="focus:outline-none" type="text" placeholder="邮箱"/>
                                </div>
                                <div class="w-full col-span-1 sm:col-span-2 h-[108px] py-[15px] border-b border-b-gray-500 focus-within:border-b-white">
                                    <textarea class="focus:outline-none w-full h-full resize-none" placeholder="留言"></textarea>
                                </div>
                                <div class="col-span-1 sm:col-span-2 mt-4">
                                    <button class="border border-gray-500 w-34 h-10 hover:bg-white hover:text-green-600 cursor-pointer">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>
